<template>
  <el-switch v-model="theme" @click="toggleDark" :active-icon="Sunny"
             :inactive-icon="Moon" inline-prompt active-color="grey" inactive-color="black"></el-switch>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useDark, useToggle} from '@vueuse/core'
import {Moon, Sunny} from '@element-plus/icons-vue'

const isDark = useDark({
  selector: 'html',
  valueDark: 'dark',
  valueLight: 'light',
})
const theme = ref(true)
const toggleDark = useToggle(isDark)
</script>

<style scoped>

</style>